<!doctype html>
<head>
    <title>Threebox example</title>
    <script src="../dist/threebox.js" type="text/javascript"></script>

    <link rel="stylesheet" href="http://minedata.cn/minemapapi/v1.2/minemap.css">
    <script src="http://minedata.cn/minemapapi/v1.2/minemap.js"></script>
    <style>
        body, html { 
            width: 100%;
            height: 100%;
            margin: 0;
        }
        #map { 
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id='map' class='map'></div>

    <script>
        minemap.accessToken = '0b871b483cfb42a7b0dd73b5f78792e8';
        minemap.solution = 66;
        var map = new minemap.Map({
            container: 'map',
            style: 'http://minedata.cn/service/solu/style/id/66',
            center: [116.4340, 39.7353],
            zoom: 15.95,
            pitch: 60,
            heading: 41,
            maxZoom: 24
        });

    var highlighted = [];

    map.on("load", function() {
        // Initialize threebox
        window.threebox = new Threebox(map);
        threebox.setupDefaultLights();

        // initialize geometry and material of our cube object
        var geometry = new THREE.BoxGeometry(2000, 2000, 2000);
        var greenMaterial = new THREE.MeshPhongMaterial( {color: 0xaaffaa, side: THREE.DoubleSide});
        var redMaterial = new THREE.MeshPhongMaterial( {color: 0xffaaaa, side: THREE.DoubleSide});

        cube = new THREE.Mesh(geometry, redMaterial);
        cube.userData.name = "Red cube";
        threebox.addAtCoordinate(cube, [116.4340, 39.7353, 2500], {preScale: 1});
        

        //add mousing interactions
        map.on('mousemove', function(e){

            raycaster = new THREE.Raycaster();
            var mouse = new THREE.Vector2();

            // Clear old objects
            highlighted.forEach(function(h) {
                h.material = redMaterial;
            });
            highlighted.length = 0;

            // scale mouse pixel position to a percentage of the screen's width and height
            mouse.x = ( e.point.x / threebox.map.transform.width ) * 2 - 1;
            mouse.y = -( ( e.point.y) / threebox.map.transform.height ) * 2 + 1;

            raycaster.setFromCamera(mouse, threebox.camera);

            // calculate objects intersecting the picking ray
            var intersects = raycaster.intersectObjects(threebox.world.children, true);
            if (!intersects[0]) return
            var nearestObject = intersects[0].object;
            console.log(nearestObject);
            nearestObject.material = greenMaterial;
            highlighted.push(nearestObject)
            
        });

    });

    </script>
</body>